{% extends "base.html" %}

{% block title %}论坛 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <!-- 左侧边栏 -->
        <div class="col-md-3">
            <div class="card ink-card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">圈子导航</h5>
                    <div class="list-group">
                        <a href="{{ url_for('forum') }}" class="list-group-item list-group-item-action {% if not current_circle %}active{% endif %}">
                            <i class="fas fa-globe me-2"></i>全部帖子
                        </a>
                        {% for circle in circles %}
                        <a href="{{ url_for('forum', circle_id=circle.id) }}" 
                           class="list-group-item list-group-item-action {% if current_circle and current_circle.id == circle.id %}active{% endif %}">
                            <i class="fas fa-users me-2"></i>{{ circle.name }}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
            
            <div class="card ink-card">
                <div class="card-body">
                    <h5 class="card-title mb-3">快速操作</h5>
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('create_post') }}" class="btn btn-primary">
                            <i class="fas fa-pen me-2"></i>发布新帖
                        </a>
                        <a href="{{ url_for('create_circle') }}" class="btn btn-outline-primary">
                            <i class="fas fa-plus me-2"></i>创建圈子
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主要内容区 -->
        <div class="col-md-9">
            <!-- 顶部操作栏 -->
            <div class="card ink-card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            {% if current_circle %}
                            <i class="fas fa-users me-2"></i>{{ current_circle.name }}
                            {% else %}
                            <i class="fas fa-globe me-2"></i>全部帖子
                            {% endif %}
                        </h4>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">
                                <i class="fas fa-sort me-2"></i>排序
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('forum', sort='latest') }}">最新发布</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('forum', sort='hot') }}">最热讨论</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 帖子列表 -->
            {% for post in posts %}
            <div class="card ink-card mb-4 post-card">
                <div class="card-body">
                    <div class="d-flex">
                        <!-- 作者头像 -->
                        <div class="me-3">
                            {% if post.author.avatar and post.author.avatar != 'default.png' %}
                            <img src="{{ url_for('static', filename='avatars/' + post.author.avatar) }}" 
                                 class="user-avatar" alt="{{ post.author.username }}"
                                 onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'default-avatar\'>{{ post.author.username[0]|upper }}</div>'">
                            {% else %}
                            <div class="default-avatar">{{ post.author.username[0]|upper }}</div>
                            {% endif %}
                        </div>
                        
                        <!-- 帖子内容 -->
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h5 class="card-title mb-0">
                                    <a href="{{ url_for('view_post', post_id=post.id) }}" class="text-decoration-none">
                                        {{ post.title }}
                                    </a>
                                </h5>
                                {% if post.circle %}
                                <span class="badge bg-primary">
                                    <i class="fas fa-users me-1"></i>{{ post.circle.name }}
                                </span>
                                {% endif %}
                            </div>
                            
                            <div class="post-meta mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>{{ post.author.username }} · 
                                    <i class="fas fa-clock me-1"></i>{{ post.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </small>
                            </div>
                            
                            <div class="post-content mb-3">
                                {{ post.content|striptags|truncate(200) }}
                            </div>
                            
                            <div class="post-actions">
                                <button class="btn btn-sm {% if post.id in liked_post_ids %}btn-primary{% else %}btn-outline-primary{% endif %} me-2" 
                                        onclick="toggleLike('{{ post.id }}', this)" id="like-btn-{{ post.id }}">
                                    <i class="fas fa-thumbs-up"></i>
                                    <span id="like-count-{{ post.id }}">{{ post.likes }}</span>
                                </button>
                                <button class="btn btn-sm btn-outline-primary me-2" 
                                        onclick="toggleComments('{{ post.id }}')">
                                    <i class="fas fa-comments"></i> 
                                    <span id="comment-count-{{ post.id }}">{{ post.comments.count() }}</span> 评论
                                </button>
                                <a href="{{ url_for('view_post', post_id=post.id) }}" class="btn btn-sm btn-outline-secondary">
                                    <i class="fas fa-eye"></i> 查看详情
                                </a>
                            </div>
                            
                            <!-- 评论区 -->
                            <div id="comments-{{ post.id }}" class="comments-section mt-3" style="display: none;">
                                <div class="comment-form mb-3">
                                    <form action="{{ url_for('add_comment', post_id=post.id) }}" method="POST">
                                        <div class="input-group">
                                            <input type="text" name="content" class="form-control" placeholder="写下你的评论...">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fas fa-paper-plane"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div id="comment-list-{{ post.id }}">
                                    {% include '_comments.html' %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            
            <!-- 分页 -->
            {% if pagination.pages > 1 %}
            <nav aria-label="Page navigation" class="mt-4">
                <ul class="pagination justify-content-center">
                    {% if pagination.has_prev %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('forum', page=pagination.prev_num, circle_id=current_circle.id if current_circle else None) }}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for page in pagination.iter_pages() %}
                        {% if page %}
                            <li class="page-item {% if page == pagination.page %}active{% endif %}">
                                <a class="page-link" href="{{ url_for('forum', page=page, circle_id=current_circle.id if current_circle else None) }}">
                                    {{ page }}
                                </a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">...</span>
                            </li>
                        {% endif %}
                    {% endfor %}
                    
                    {% if pagination.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="{{ url_for('forum', page=pagination.next_num, circle_id=current_circle.id if current_circle else None) }}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
        </div>
    </div>
</div>

<style>
.ink-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.ink-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.default-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.post-card {
    transition: transform 0.2s ease;
}

.post-card:hover {
    transform: translateY(-2px);
}

.comments-section {
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

.comment-form .input-group {
    border-radius: 20px;
    overflow: hidden;
}

.comment-form input {
    border: 1px solid #dee2e6;
    padding: 0.5rem 1rem;
}

.comment-form button {
    border-radius: 0 20px 20px 0;
}

.pagination .page-link {
    border: none;
    margin: 0 2px;
    border-radius: 5px;
    color: #6c757d;
}

.pagination .page-item.active .page-link {
    background-color: #0d6efd;
    color: white;
}

.list-group-item {
    border: none;
    padding: 0.75rem 1rem;
    margin-bottom: 2px;
    border-radius: 5px !important;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

.list-group-item.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
</style>

<script>
function toggleLike(postId, btn) {
    fetch(`/post/${postId}/like`, {
        method: 'POST',
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const likeCount = document.getElementById(`like-count-${postId}`);
            likeCount.textContent = data.likes;
            
            if (data.action === 'liked') {
                btn.classList.remove('btn-outline-primary');
                btn.classList.add('btn-primary');
            } else {
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-primary');
            }
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请稍后重试');
    });
}

function toggleComments(postId) {
    const commentsSection = document.getElementById(`comments-${postId}`);
    if (commentsSection.style.display === 'none') {
        commentsSection.style.display = 'block';
    } else {
        commentsSection.style.display = 'none';
    }
}
</script>
{% endblock %} 